<template>
  <div style="background: #F0F2F5;" id="ExportCaseAnalysis">
    <div class="ExportCaseAnalysis">
      <commonSearch :show="false" @onQuery="onQuery" @onReset="onReset" @onDownload="onDownload" />
      <a-row :gutter="24" style="margin-top:10px;">
        <a-card title="" class="box1">
          <a-col :sm="24" :md="4" :xl="12">
            <chart-card :loading="loading" title="案件总计" :total="totalCases | NumberFormat">
              <template slot="footer"
                >环比
                <a-icon
                  v-if="totalCasesStatisticsAndMoMDto.moMValue > 0"
                  class="m1"
                  type="caret-up"
                  :style="{ fontSize: '16px', color: '#F52D38' }"
                />
                <a-icon
                  v-if="totalCasesStatisticsAndMoMDto.moMValue < 0"
                  class="m1"
                  type="caret-down"
                  :style="{ fontSize: '16px', color: '#90D96C' }"
                />
                <!-- <span class="m1" v-if="totalCasesStatisticsAndMoMDto.moMValue == 0"> -- </span> -->
                <span class="m1" v-if="totalCasesStatisticsAndMoMDto.moMRatio == '-'">--</span>
                <span class="m1" v-if="totalCasesStatisticsAndMoMDto.moMRatio != '-'">
                  {{ Math.abs(totalCasesStatisticsAndMoMDto.moMRatio) | NumberFormat }}%
                </span>
                <span class="m1"> {{ Math.abs(totalCasesStatisticsAndMoMDto.moMValue) | NumberFormat }}</span></template
              >
            </chart-card>
          </a-col>
          <a-col :sm="24" :md="4" :xl="12">
            <chart-card :loading="loading" title="涉案总金额" :total="totalAmountInvolved | NumberFormat">
              <template slot="footer"
                >环比
                <a-icon
                  v-if="totalAmountInvolvedStatisticsAndMoMDto.moMValue > 0"
                  class="m1"
                  type="caret-up"
                  :style="{ fontSize: '16px', color: '#F52D38' }"
                />
                <a-icon
                  v-if="totalAmountInvolvedStatisticsAndMoMDto.moMValue < 0"
                  class="m1"
                  type="caret-down"
                  :style="{ fontSize: '16px', color: '#90D96C' }"
                />
                <!-- <span class="m1" v-if="totalCasesStatisticsAndMoMDto.moMValue == 0"> -- </span> -->
                <span class="m1" v-if="totalAmountInvolvedStatisticsAndMoMDto.moMRatio == '-'">--</span>
                <span class="m1" v-if="totalAmountInvolvedStatisticsAndMoMDto.moMRatio != '-'">
                  {{ Math.abs(totalAmountInvolvedStatisticsAndMoMDto.moMRatio) | NumberFormat }}%
                </span>
                <span class="m1">
                  {{ Math.abs(totalAmountInvolvedStatisticsAndMoMDto.moMValue) | NumberFormat }}</span
                ></template
              >
            </chart-card>
          </a-col>
        </a-card>
      </a-row>
      <a-row :gutter="24" style="margin-top:10px;" class="box2">
        <a-card title="">
          <a-radio-group buttonStyle="solid" v-model="tabType1" class="tabBox" @change="e => onRadioChange1(e)">
            <a-radio-button v-for="(item, key) in tabOptions1" :key="key" :value="item.value">
              {{ item.text }}
            </a-radio-button>
          </a-radio-group>
          <a-card :title="getTitle1(tabType1)" id="ExportCaseAnalysis1">
            <a-icon
              slot="extra"
              type="download"
              style="color:#BFBFBF;font-size: 20px;"
              @click="download('#ExportCaseAnalysis1', '案件分析-' + getTitle1(tabType1))"
            />
            <smPie
              v-if="pieOption.data.length > 0"
              :data="pieOption.data"
              :color="pieOption.color"
              :legendRight="pieOption.legendRight"
              :itemGap="pieOption.itemGap"
              legendType="scroll"
              legendLabelSuffix
              :hollow="false"
              :labelLine="true"
              style="height:300px;"
            ></smPie>
            <p class="noData" v-else><a-empty /></p>
          </a-card>
        </a-card>
      </a-row>
    </div>
    <div class="ExportDissuasionAnalysis">
      <a-row :gutter="24" style="margin-top:10px;" class="box3">
        <a-card title="">
          <a-radio-group  buttonStyle="solid" v-model="tabType2" class="tabBox" @change="e => onRadioChange2(e)">
            <a-radio-button v-for="(item, key) in tabOptions2" :key="key" :value="item.value">
              {{ item.text }}
            </a-radio-button>
          </a-radio-group>
          <a-card :title="getTitle2(tabType2)" id="ExportCaseAnalysis2" :bodyStyle="{padding: '20px 0 0 0', height: 'auto'}">
            <a-icon
              slot="extra"
              type="download"
              style="color:#BFBFBF;font-size: 20px;"
              @click="download('#ExportCaseAnalysis2', '案件分析-' + getTitle2(tabType2))"
            />
            <smLine
              style="height:300px;"
              v-if="lineOption.data.length > 0 && isLoaded"
              :data="lineOption.data"
              :color="lineOption.color"
              legend
              legendType="plain"
            />
            <p class="noData" v-else><a-empty /></p>
          </a-card>
        </a-card>
      </a-row>
    </div>
    <div class="ExportDissuasionAnalysis">
      <a-row :gutter="24" style="margin-top:10px;">
        <a-card :title="'各办案单位案件数量概况统计'" id="ExportCaseAnalysis3">
          <a-icon
            slot="extra"
            type="download"
            style="color:#BFBFBF;font-size: 20px;"
            @click="download('#ExportCaseAnalysis3', '案件分析-各办案单位案件数量概况统计')"
          />
          <smRankBar
            v-if="barOption.data.length>0"
            style="height:300px;"
            :data="barOption.data"
            :barWidth="30"
          />
          <a-empty v-else/>
        </a-card>
      </a-row>
    </div>
  </div>
</template>
<script>
import exportHandle from '@/utils/export-util/pdf-canvas'
import ChartCard from '@/components/ChartCard'
import commonSearch from '.././components/commonSearch'
import smPie from '@/components/echarts/smPie.vue'
import smLine from '@/components/echarts/smLine.vue'
import smRankBar from '@/components/echarts/smRankBar.vue'
import config from '@/defaultSettings'
import { caseReport } from '@/api/dataKanban/dissuadeAnalysis.js'
export default {
  components: {
    ChartCard,
    smPie,
    smLine,
    smRankBar,
    commonSearch
  },
  data() {
    return {
      tabOptions1: [
        { value: '0', text: '诈骗类型占比' },
        { value: '1', text: '受害人性别占比' },
        { value: '2', text: '受害人年龄段占比' },
        { value: '3', text: '受害人职业占比' },
        { value: '4', text: '受害人学历占比' },
        { value: '5', text: '社交工具占比' },
        { value: '6', text: '转账方式占比' }
      ],
      tabOptions2: [
        { value: '0', text: '诈骗类型趋势' },
        { value: '1', text: '受害人性别趋势' },
        { value: '2', text: '受害人年龄段趋势' },
        { value: '3', text: '受害人职业趋势' },
        { value: '4', text: '受害人学历趋势' },
        { value: '5', text: '社交工具趋势' },
        { value: '6', text: '转账方式趋势' },
        { value: '7', text: '案件数量趋势' },
        { value: '8', text: '案件金额趋势' }
      ],
      loading: true,
      queryParam: {
        caseTimeType: '2'
      },
      tabType1: '0',
      tabType2: '0',
      totalCases: 0,
      totalCasesStatisticsAndMoMDto: {
        moMValue: 10
      },
      totalAmountInvolved: 0,
      totalAmountInvolvedStatisticsAndMoMDto: {
        moMValue: 10
      },
      //饼图
      proportionOfFraudTypes: [],
      sexRatioOfVictims: [],
      proportionOfAgeGroupsOfVictims: [],
      occupationProportionOfVictims: [],
      percentageOfVictimsEducation: [],
      proportionOfSocialTools: [],
      proportionOfTransferMethods: [],
      //线性图
      fraudTypeTrend: [],
      genderTrendsOfVictims: [],
      trendsInAgeGroupsOfVictims: [],
      professionalTrendsOfVictims: [],
      educationalTrendsOfVictims: [],
      socialToolsTrends: [],
      transferMethodTrend: [],
      caseAmountTrend: [],
      trendsInTheNumberOfCases: [],
      //各办案单位案件数量概况统计
      numberOfCasesHandledByUnitColumnar: [],
      pieOption: {
        data: [],
        legendRight: '20%',
        color: config.echarts_base_color1,
        itemGap: document.documentElement.clientHeight * 0.02
      },
      lineOption: {
        data: [],
        color: config.echarts_base_color1,
        itemGap: document.documentElement.clientHeight * 0.02
      },
      barOption: {
        data: [],
        color: config.echarts_base_color1,
        itemGap: document.documentElement.clientHeight * 0.02
      },
      isLoaded: true
    }
  },
  mounted() {
    this.getAllData()
  },
  methods: {
    getAllData() {
      this.loading = !this.loading
      caseReport(this.queryParam)
        .then(res => {
          if (res.success) {
            //总数
            this.totalCasesStatisticsAndMoMDto = res.result.totalCasesStatisticsAndMoMDto
            this.totalCases = res.result.totalCases
            this.totalAmountInvolvedStatisticsAndMoMDto = res.result.totalAmountInvolvedStatisticsAndMoMDto
            this.totalAmountInvolved = res.result.totalAmountInvolved
            //饼图
            this.proportionOfFraudTypes = res.result.proportionOfFraudTypes
            this.sexRatioOfVictims = res.result.sexRatioOfVictims
            this.proportionOfAgeGroupsOfVictims = res.result.proportionOfAgeGroupsOfVictims
            this.occupationProportionOfVictims = res.result.occupationProportionOfVictims
            this.percentageOfVictimsEducation = res.result.percentageOfVictimsEducation
            this.proportionOfSocialTools = res.result.proportionOfSocialTools
            this.proportionOfTransferMethods = res.result.proportionOfTransferMethods
            //线图
            this.fraudTypeTrend = res.result.fraudTypeTrend
            this.genderTrendsOfVictims = res.result.genderTrendsOfVictims
            this.trendsInAgeGroupsOfVictims = res.result.trendsInAgeGroupsOfVictims
            this.professionalTrendsOfVictims = res.result.professionalTrendsOfVictims
            this.educationalTrendsOfVictims = res.result.educationalTrendsOfVictims
            this.socialToolsTrends = res.result.socialToolsTrends
            this.transferMethodTrend = res.result.transferMethodTrend
            this.caseAmountTrend = res.result.caseAmountTrend
            this.trendsInTheNumberOfCases = res.result.trendsInTheNumberOfCases

            //显示选项卡对应的图表
            this.onRadioChange1(this.tabType1)
            this.onRadioChange2(this.tabType2)
            //各办案单位案件数量概况统计
            this.numberOfCasesHandledByUnitColumnar = res.result.numberOfCasesHandledByUnitColumnar
            this.getBarData(this.numberOfCasesHandledByUnitColumnar)
          } else {
            this.$message.warning(res.message ? res.message : '请求失败！')
          }
        })
        .catch(e => {
          this.$message.warn('请求失败！')
        })
        .finally(() => {
          this.loading = false
        })
    },
    getPiesData(n) {
      this.pieOption.data = []
      console.log(n)
      if (n == 0 && this.proportionOfFraudTypes != null && this.proportionOfFraudTypes.length > 0) {
        this.$set(this.pieOption, 'data', this.proportionOfFraudTypes)
      }
      if (n == 1 && this.sexRatioOfVictims != null && this.sexRatioOfVictims.length > 0) {
        this.$set(this.pieOption, 'data', this.sexRatioOfVictims)
      }
      if (n == 2 && this.proportionOfAgeGroupsOfVictims != null && this.proportionOfAgeGroupsOfVictims.length > 0) {
        this.$set(this.pieOption, 'data', this.proportionOfAgeGroupsOfVictims)
      }
      if (n == 3 && this.occupationProportionOfVictims != null && this.occupationProportionOfVictims.length > 0) {
        this.$set(this.pieOption, 'data', this.occupationProportionOfVictims)
      }
      if (n == 4 && this.percentageOfVictimsEducation != null && this.percentageOfVictimsEducation.length > 0) {
        this.$set(this.pieOption, 'data', this.percentageOfVictimsEducation)
      }
      if (n == 5 && this.proportionOfSocialTools != null && this.proportionOfSocialTools.length > 0) {
        this.$set(this.pieOption, 'data', this.proportionOfSocialTools)
      }
      if (n == 6 && this.proportionOfTransferMethods != null && this.proportionOfTransferMethods.length > 0) {
        this.$set(this.pieOption, 'data', this.proportionOfTransferMethods)
      }
    },
    getLinesData(n) {
      this.lineOption.data = []
      this.isLoaded = false
      setTimeout(() => {
        this.isLoaded = true
        if (n == 0) {
          this.lineOption.data = this.changeMLineData(this.fraudTypeTrend)
        }
        if (n == 1) {
          this.lineOption.data = this.changeMLineData(this.genderTrendsOfVictims)
        }
        if (n == 2) {
          this.lineOption.data = this.changeMLineData(this.trendsInAgeGroupsOfVictims)
        }
        if (n == 3) {
          this.lineOption.data = this.changeMLineData(this.professionalTrendsOfVictims)
        }
        if (n == 4) {
          this.lineOption.data = this.changeMLineData(this.educationalTrendsOfVictims)
        }
        if (n == 5) {
          this.lineOption.data = this.changeMLineData(this.socialToolsTrends)
        }
        if (n == 6) {
          this.lineOption.data = this.changeMLineData(this.transferMethodTrend)
        }
        if (n == 7) {
          let list = []
          this.trendsInTheNumberOfCases.forEach((item, index) => {
            let obj = {
              product: item.date
            }
            item.points.map(count => {
              obj['案件数'] = count.count? count.count: 0
            })
            list.push(obj)
          })
          this.lineOption.data = list
        }
        if (n == 8) {
          this.lineOption.data = this.changeMLineData(this.caseAmountTrend, 'countBigDecimal')
        }
      }, 10)
    },
    changeMLineData(arr, keyValue='count') {
      let list = []
      if (arr != null && arr.length > 0) {
        arr.map((item, index) => {
          let obj = {
            product: item.date
          }
          item.points.map(count => {
            obj[count.typeName] = count[keyValue]?count[keyValue]: 0
          })
          list.push(obj)
        })
      }
      return list
    },
    onRadioChange1(e) {
      let radioValue
      if(e instanceof Object && Object.keys(e).length>0) {
        radioValue = e.target.value
      } else {
        radioValue = e
      }
      this.getPiesData(radioValue)
    },
    onRadioChange2(e) {
      let radioValue
      if(e instanceof Object && Object.keys(e).length>0) {
        radioValue = e.target.value
      } else {
        radioValue = e
      }
      this.getLinesData(radioValue)
    },
    getTitle1(val) {
      return this.tabOptions1[val].text
    },
    getTitle2(val) {
      return this.tabOptions2[val].text
    },
    onQuery(queryParam) {
      this.queryParam.startTimeFrame = queryParam.warningStartTime
      this.queryParam.stopTimeFrame = queryParam.warningEndTime
      this.queryParam.caseTimeType = queryParam.warningTimeType
      // this.queryParam = Object.assign(this.queryParam, queryParam)
      this.getAllData()
    },
    onReset() {
      this.queryParam = { caseTimeType: '2' }
      this.tabType1 = '0'
      this.tabType2 = '0'
      this.getAllData()
    },
    onDownload() {
      this.download('#ExportCaseAnalysis', '案件分析')
    },
    // 下载PDF
    download(DomID, filename) {
      let refDom = document.querySelector(DomID)
      this.$nextTick(() => {
        exportHandle.exportPDF(refDom, filename)
      })
    },
    getPieData() {
      let arr = [
        {
          product: 'aa',
          count: 11,
          ratio: '30%'
        },
        {
          product: 'bb',
          count: 22,
          ratio: '60%'
        }
      ]
      return arr
    },
    getEmbedPieData() {
      let arr = [
        {
          product: '已劝阻',
          count: 4,
          children: [
            {
              product: '已劝阻',
              count: 4
            }
          ]
        },
        {
          product: '未劝阻',
          count: 4,
          children: [
            {
              product: '屏蔽劝阻',
              count: 3
            },
            {
              product: '超期',
              count: 1
            }
          ]
        }
      ]
      return arr
    },
    getSLineTestData() {
      let arr = [
        {
          date: '2021-1-1',
          count: '20',
          typeName: '11111'
        },
        {
          date: '2021-1-2',
          count: '100',
          typeName: '22222'
        },
        {
          date: '2021-1-3',
          count: '10',
          typeName: '33333'
        }
      ]
      return arr
    },
    getMLineTestData() {
      let arr = [
        {
          points: [
            {
              count: 1,
              type: 1,
              typeName: '劝诫'
            },
            {
              count: 2,
              type: 2,
              typeName: '告诫'
            },
            {
              count: 4,
              type: 3,
              typeName: '报送公安'
            }
          ],
          date: '08/24'
        },
        {
          points: [
            {
              count: 4,
              type: 1,
              typeName: '劝诫'
            },
            {
              count: 2,
              type: 2,
              typeName: '告诫'
            },
            {
              count: 6,
              type: 3,
              typeName: '报送公安'
            }
          ],
          date: '08/25'
        },
        {
          points: [
            {
              count: 4,
              type: 1,
              typeName: '劝诫'
            },
            {
              count: 8,
              type: 2,
              typeName: '告诫'
            },
            {
              count: 3,
              type: 3,
              typeName: '报送公安'
            }
          ],
          date: '08/26'
        },
        {
          points: [
            {
              count: 2,
              type: 1,
              typeName: '劝诫'
            },
            {
              count: 3,
              type: 2,
              typeName: '告诫'
            },
            {
              count: 4,
              type: 3,
              typeName: '报送公安'
            }
          ],
          date: '08/27'
        }
      ]
      return arr
    },
    getMlineTestData1() {
      let arr = [
        [
          {
            points: [
              {
                count: 1,
                type: 1,
                typeName: '劝诫'
              },
              {
                count: 10,
                type: 2,
                typeName: '告诫'
              },
              {
                count: 4,
                type: 3,
                typeName: '报送公安'
              }
            ],
            date: '08/24'
          },
          {
            points: [
              {
                count: 4,
                type: 1,
                typeName: '劝诫'
              },
              {
                count: 2,
                type: 2,
                typeName: '告诫'
              },
              {
                count: 2,
                type: 3,
                typeName: '报送公安'
              }
            ],
            date: '08/25'
          },
          {
            points: [
              {
                count: 2,
                type: 1,
                typeName: '劝诫'
              },
              {
                count: 5,
                type: 2,
                typeName: '告诫'
              },
              {
                count: 9,
                type: 3,
                typeName: '报送公安'
              }
            ],
            date: '08/26'
          }
        ],
        [
          {
            points: [
              {
                count: 1,
                type: 3,
                typeName: '劝诫'
              },
              {
                count: 1,
                type: 2,
                typeName: '告诫'
              },
              {
                count: 8,
                type: 3,
                typeName: '报送公安'
              }
            ],
            date: '08/24'
          },
          {
            points: [
              {
                count: 6,
                type: 1,
                typeName: '劝诫'
              },
              {
                count: 2,
                type: 2,
                typeName: '告诫'
              },
              {
                count: 1,
                type: 3,
                typeName: '报送公安'
              }
            ],
            date: '08/25'
          }
        ]
      ]
      return arr
    },
    getBarData(datas) {
      console.log(datas)
      this.barOption.data = datas.map(item=>{
        return {
          product: item.typeName,
          "数量": item.count
        }
      })
    },
  }
}
</script>
<style lang="less" scoped>
/deep/ .box1 .ant-card-body {
  border: 1px solid #e8e8e8;
  padding: 20px 8px;
}
/deep/.ant-card-body {
  border: none;
  .ant-card-bordered {
    border: none;
  }
}
.box2,
.box3 {
  .tabBox {
    width: 100%;
    height: 48px;
    display: flex;
    align-items: center;
  }
  /deep/ .ant-radio-button-wrapper {
    flex: 1;
    text-align: center;
    line-height: 48px;
    height: 48px;
  }
  /deep/ .ant-card-head-wrapper {
    height: 48px;
  }
}
.box3 {
  /deep/.ant-card-body {
    height: 500px;
    // padding: 0;
  }
}

/deep/.total {
  line-height: 54px;
  height: auto;
  span {
    display: block;
    text-align: center;
  }
}
// /deep/ .ant-card-body {
//   height: 100%;
// }

/deep/ .ant-card-head-title {
  font-weight: bold;
  padding: 5px 0;
}
/deep/ .ant-card {
  height: 94%;
  margin: 0 10px;
}
/deep/.chart-card-content {
  // display: none;
  height: 0;
}
/deep/.chart-card-header .meta,
/deep/.chart-card-footer {
  text-align: center;
  // border: none;
  padding-top: 9px;
  margin-top: 8px;
}
.m1 {
  margin-left: 10px;
}
.noData {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
// /deep/.ant-col-xl-12 {
//   height: 360px;
// }
.radioBox {
  position: absolute;
  top: 80px;
  left: 50px;
  z-index: 1;
}
/deep/.sjly,
/deep/.xzqh {
  display: none;
}
</style>
